<template>
    <div class="rankList">
        <ul>
            <p>点赞排行榜</p>
            <li v-for="(post,index) in list" :key="index">
                <router-link :to="`/postDetail/${post.bodyId}`">
                    <div class="number">{{index+1}}</div>
                    <div class="title">{{post.content}}</div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'SearchRank',
    data() {
        return {
            list:null
        }
    },
    mounted(){
        axios({
            url:"/body/list",
            method:'get',
        }).then(data=>{
            this.list = data.data.data
        }).catch(err=>{
            console.log(err)
        })
    }
}
</script>

<style lang="less" scoped>
.rankList{
    margin-top: 0.5rem;
    background-color: white;
    flex: 1;
    ul{
        height: calc(100% - 0.5rem);
        border: solid 1px #ffefff;
        padding: 0.3rem 1rem;
        background-image: linear-gradient(to bottom right, #f8f8f8, #fff6ff);
        p{
            color: #838383;
            font-size: 0.4rem;
            margin-bottom:0.3rem
        }
        li{
            padding: 0.2rem 0;
            display: flex;
            a{
                display: flex;
                .number{
                    font-size: 0.4rem;
                    display: flex;
                    align-items: center;
                    color: red;
                    margin-right: 0.2rem;
                    font-weight: 800;
                }
                .title{
                    font-size: 0.4rem;
    
                    color: #333333;
                }
            }
        }
    }
}
</style>